<template>
  <div>
    <el-table
      ref="singleTable"
      v-loading="loading"
      :data="tableData"
      :tree-props="treeProps"
      row-key="id"
      border
      stripe
      fit
      highlight-current-row
      :default-expand-all="defaultExpand"
      style="width: 100%;margin-top:10px;font-size:12px"
      :header-cell-style="{background:'#F3F3F3',color:'#606266'}"
      :max-height="is_height||height"
      :height="is_height||height"
      size="mini"
      @current-change="handleCurrent"
      @selection-change="handleSelectionChange"
      @cell-click="cellClick"
    >
      <!-- <el-table-column
        slot="index"
        type="selection"
        width="55"
      /> -->
      <slot name="index" />
      <!-- 序号 -->
      <el-table-column
        v-if="isIndex"
        :fixed="fixed"
        label="序号"
        type="index"
        width="50"
        :index="indexMethod"
      />
      <el-table-column
        v-for="(item,key) of columns"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        :width="item.width?item.width:''"
        :show-overflow-tooltip="item.tooltip === false? false:true"
        :formatter="item.isArction ? nummatter : textmatter"
        :sortable="item.sortable"
      />
      <slot />
      <!--状态-->
      <slot name="handleState" />
      <!--操作-->
      <slot name="handleColumn" />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 列表
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 开启加载
    loading: {
      type: Boolean,
      default: false
    },
    treeProps: {
      type: Object,
      default: () => {}
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    isIndex: {
      type: [Boolean],
      default: true
    },
    // 自定义高度
    is_height: {
      type: [String, Boolean, Number],
      default: false
    },
    // 序号排序
    pageIndex: {
      type: Object,
      default: () => {
        return {
          current: 1,
          size: 20
        }
      }
    },
    fixed: {
      type: Boolean,
      default: true
    },
    // 展开行是否折叠
    defaultExpand: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      height: 400
    }
  },
  mounted() {
    // 高度适应
    this.$nextTick(() => {
      this.height = window.innerHeight - 300
      // 后面的50：根据需求空出的高度，自行调整
    })
    this.wid()
  },
  methods: {
    // 根据屏幕大小自适应高度
    wid() {
      window.onresize = () => {
        return (() => {
          this.$nextTick(() => {
            this.height = window.innerHeight - 300
            // 后面的50：根据需求空出的高度，自行调整
          })
        })()
      }
    },
    // 选择行数据
    handleCurrent(val) {
      if (val !== null) {
        this.$emit('handleCurrent', val)
      }
    },
    handleSelectionChange(row) {
      this.$emit('handleSelectionChange', row)
    },
    // 时间格式化
    dateFormatter(row, column) {
      let datetime = row[column.property]
      if (datetime) {
        datetime = new Date(datetime)
        const y = datetime.getFullYear() + '-'
        const mon = datetime.getMonth() + 1 + '-'
        const d = datetime.getDate()
        return y + mon + d
      }
      return ''
    },
    // 文本格式化
    textmatter(row, column) {
      if (row[column.property] === 0) {
        return row[column.property]
      }
      return row[column.property] ? row[column.property] : '-'
    },
    // 金额格式化
    nummatter(row, column) {
      if (row.isPrice) {
        return row[column.property] ? (row[column.property] / 10000) : '0'
      } else {
        return row[column.property] ? '￥' + (row[column.property] / 10000) : '0'
      }
    },
    // 序号
    indexMethod(index) {
      return (this.pageIndex.current - 1) * this.pageIndex.size + index + 1
    },
    cellClick(row, column, cell, event) {
      this.$emit('cellClick', row, column, cell, event)
    }
    // clickItem(item)
  }
}
</script>

<style scoped lang="less">
/deep/.el-table .cell{
  overflow: hidden;
  white-space: nowrap;
}
/deep/.el-table__body tr.current-row>td {
    background: #E8F4FF !important;
}
</style>

